<template>
  <div class="xd-LearningHome-PoliticalNews">
    <div v-if="showSlide" class="m_t_15 slide">
      <!-- <img :src="slideList[slideIndex].imgSrc" /> -->
      <div class="carousel-panel">
        <el-carousel trigger="click" height="360px" @change="slideChange" :autoplay="false">
          <el-carousel-item v-for="(item, index) in slideList" :key="index">
            <img class="slide-image" :src="item.imgSrc" @click="goNewsDetail(item.id)" />
            <div class="slide-detail" @click="goNewsDetail(item.id)">
              <div class="text_size_18 text_color_white text_bold">{{ item.title }}</div>
              <pre v-html="item.summary" class="text_color_white text_size_7"></pre>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <el-container class="xd-el-container">
      <el-main class="xd-el-main">
        <router-view ref="politcalNewsDetail"></router-view>
      </el-main>
      <el-aside class="xd-el-aside" width="16vw">
        <el-card class="box-card m_t_b_1vw" shadow="hover">
          <div slot="header">
            <div class="tag">置顶新闻</div>
          </div>
          <div
            v-for="(item, index) in topNewsList"
            :key="'top' + index"
            class="aside-list-item"
            @click="goNewsDetail(item.i_id)"
          >{{'· ' +item.v_seach_v_notice_title}}</div>
        </el-card>
        <el-card class="box-card m_t_b_1vw" shadow="hover">
          <div slot="header">
            <div class="tag">最热新闻</div>
          </div>
          <div
            v-for="(item, index) in hotNewsList"
            :key="'hot' + index"
            class="aside-list-item"
            @click="goNewsDetail(item.i_id)"
          >{{'· ' +item.v_seach_v_notice_title}}</div>
        </el-card>
      </el-aside>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'PoliticalNews',
  data() {
    return {
      topNewsList: [],
      hotNewsList: [],
      slideList: [],
      slideIndex: 0
    }
  },
  computed: {
    showSlide() {
      return this.$route.path !== '/LearningHome/PoliticalNews/NewsDetail'
    }
  },
  methods: {
    fetchTopNews() {
      utils.post('/notice/IstopNews', {}, res => {
        if (res.success) {
          this.topNewsList = res.data;
        }
      })
    },
    fetchHotNews() {
      utils.post('/notice/MostReceiveNews', {}, res => {
        if (res.success) {
          this.hotNewsList = res.data;
        }
      })
    },
    goNewsDetail(tid) {
      this.$router.push({ path: '/LearningHome/PoliticalNews/NewsDetail', query: { id: tid } })
    },
    slideChange(index) {
      this.slideIndex = index
    },
    fetchSlide() {
      utils.post('notice/RoutineFile', {}, res => {
        if (res.success) {
          this.slideList = res.data.map(item => {
            return {
              id: item.businessId,
              title: item.title,
              summary: item.zy,
              imgSrc: item.imgUrl
            }
          })
        }
      })
    }
  },
  created() {
    // for (let index = 0; index < 5; index++) {
    //   this.slideList.push({
    //     id: index,
    //     title: '商务部就习近平主席出席第二届中国国际进口博览会举行中外媒体吹风会' + index,
    //     summary: '10月29日，商务部举行中外媒体吹风会。中国国际进口博览会组委会办公室主任、商务部副部长王炳南介绍习近平主席出席..........中国国际进口博览会相关情况，并回答记者提问。' + index,
    //     imgSrc: 'http://www.qstheory.cn/titlepic/112462/1124629810_1560656376062_title0h.jpg'
    //   })
    // }
    this.fetchSlide()
    this.fetchTopNews()
    this.fetchHotNews()
  }
}
</script>
<style lang="less">
.xd-LearningHome-PoliticalNews {
  .slide {
    display: flex;
    padding: 0px 10px;
    cursor: pointer;
    img {
      width: 650px;
      height: auto;
    }
    .slide-detail {
      padding: 30px 25px;
      pre {
        line-height: 1.5;
      }
    }
    // .slide-image {
    //   cursor: pointer;
    // }

    .carousel-panel {
      background-color: #07806c;
      // padding: 27px 16px 0px 23px;
      flex: 1;
      .el-carousel__item {
        display: flex;
        flex-direction: row;
      }
      .el-carousel__indicator {
        width: 5px;
        height: 5px;
        background-color: #ffffff;
        border-radius: 3px;
        padding: 0px;
        margin: 0px 10px;

        button {
          display: none;
        }
      }
      .el-carousel__indicator.is-active {
        background-color: #1cdfbf;
      }
      .el-carousel__indicators--horizontal {
        left: 87%;
        width: 200px;
        bottom: 20px;
      }
    }
  }

  .xd-el-aside {
    .el-card__body {
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .aside-list-item {
    cursor: pointer;
    color: #666666;
    padding: 5px 0;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>